<template>
  <div>
    <!-- 搜索框 -->
    <div style="margin-top: 40px; margin-left: 450px">
      <el-input placeholder="输入文章标题" style="width: 50%" v-model="name">
        <el-button
          slot="append" style="background: #ff6500; border-color: #ff6500; color: white"
          @click="pageQuery">搜索</el-button
        >
      </el-input>
    </div>
    <!-- 导航 -->
    <el-tabs
      style="margin-left: 150px; margin-top: 50px;" v-model="activeName" type="card"
       @tab-click="handleClick"
    >
      <el-tab-pane  label="南疆单列" name="1"> </el-tab-pane>
      <el-tab-pane label="专项计划" name="2"></el-tab-pane>
      <el-tab-pane label="高职单招" name="3"> </el-tab-pane>
    </el-tabs>
    <div class="container">
      <div class="article-container" >
        <!-- 左侧文章列表 -->
        <el-card 
          class="custom-card"
          v-for="article in records"
          :key="article.id"
        >
          <el-button type="text" class="custom-title" @click="handleSkip(article.id)">{{
            article.title
          }}</el-button>
          <div class="card-content">
            <div class="card-info" style="margin-top: 30px">
              <span class="custom-info">发布时间: {{ article.createTime }}</span>
              <span class="custom-info" style="margin-left:20px;margin-right:20px"> 
                <i class="el-icon-view" style="margin-left: 30px">{{article.views }}次阅读</i>
              </span>
              <span class="custom-info">{{ article.likes}}次点赞</span>
            </div>
            <!-- 文章封面 -->
            <el-image
              v-if="article.cover"
              style="
                width: 150px;
                height: 120px;
                margin-top: -120px;
                margin-left: 725px;
              "
              :src="article.cover"
            ></el-image>
          </div>
        </el-card>
        <span style="margin-left:500px" v-if="records.length===0">暂无数据！</span>
        <!-- 分页插件 -->
   <el-pagination
   style="text-align: center;
        margin-top: 30px;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[10, 20, 30]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
      </div>
       
      <!-- 热点 -->
      <div class="hot-articles">
        <h2>
          <svg-icon
            icon-class="fire-solid"
            style="width: 25px; height: 25px; margin-right: 10px"
          ></svg-icon
          >热点
        </h2>
        <ul>
          <li v-for="(article, index) in hotArticles" :key="index">
            <div class="article-card">
              <div
                :class="[
                  'rank',
                  'rank-' + (index + 1),
                  index >= 3 ? 'rank-n' : '',
                ]"
              >
                {{ index + 1 }}
              </div>
              <div class="article-info">
                <el-button type="text" class="article-title" @click="()=>{handleSkip(article.id)}">{{
                  article.title
                }}</el-button>
              </div>
            </div>
          </li>
        </ul>
      
       
      </div>

    </div>
  </div>
</template>

<script>
import { getArticleList,getHotArticle } from "@/api/article";
export default {
  data() {
    return {
      activeName: "1",
      name: '',//员工姓名，跟上面的输入框一致
      page:'1',//页码
      pageSize:'10',//每页记录数
      total:'',//总记录数
      records:'',//当前页展示的数据集合
      activeIndex: 1,
      hotArticles:''
    };
  },
      // 处理标签页点击事件的逻辑
  methods: {
    handleClick(tab) {
     this.activeName=tab.name
     this.pageQuery()
    },
     pageQuery(){
      //准备的请求数据
      const prams={name:this.name,page:this.page,pageSize:this.pageSize,type:this.activeName}
      //通过ajax发起异步请求
      getArticleList(prams).then(res=>{
        //成功访问
        if(res.data.code===1){
          this.total=res.data.data.total
          this.records=res.data.data.records
        }
      }).catch(err=>{
        this.$message.error('请求出错了'+err.message)
        
      })
      
    },
       //pageSize发生了变化
    handleSizeChange(pageSize){
      this.pageSize=pageSize
      this.pageQuery()
    },
    //page发生了变化
    handleCurrentChange(page){
      this.page=page
      this.pageQuery()
    },
    //处理跳转
    handleSkip(id){
       //跳转到文章详情页面(addEmployee组件)
    this.$router.push({path:'newsDetail',query:{id:id}})
    }
  },
  created() {
   this.pageQuery();
   getHotArticle().then(res=>{
    if(res.data.code===1){
      this.hotArticles=res.data.data
    }
   })
  },
  
};
</script>
<style scoped>
/* 搜索框 */

.custom-card {
  position: relative;
  width: 80%;
  overflow: hidden;
  margin-top: 0px;
  margin-left: 150px;
}
.custom-card:hover {
  background: rgb(222, 219, 219);
}

.custom-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #ff4f52, #ff4f52);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s;
  z-index: 1;
}

.custom-card:hover::after {
  transform: scaleX(1);
}
.custom-card {
  width: 900px; /* 调整卡片的宽度 */
  height: 120px; /* 调整卡片的高度 */
}

.custom-title {
  font-size: 20px; /* 调整标题字体的大小 */
  color: rgb(34, 31, 31); /* 调整标题字体的颜色 */
}

.custom-info {
  font-size: 14px; /* 调整信息字体的大小 */
  color: gray; /* 调整信息字体的颜色 */
}

.custom-icon {
  font-size: 20px; /* 调整图标字体的大小 */
  /* 可以在这里添加其他样式属性，例如调整图标的颜色等 */
}

.container {
  display: flex;
  flex-direction: row;
}

.article-container {
  flex: 1;

  /* 其他样式 */
}

.hot-articles {
  flex: none;
  margin-left: 20px;
  margin-top: -100px;
  width: 400px;
  /* 其他样式 */
}

h2 {
  font-size: 18px;
  margin-left: 20px;
  margin-bottom: 10px;
}

ul {
  list-style: none;
  padding: 0;
}

.article-card {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  margin-right: -10px;
  background-color: #f9f9f9;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.rank {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  line-height: 20px;
  font-size: 15px;
  color: #fff;
  text-align: center;
}

.rank.rank-1 {
  background: linear-gradient(rgb(245, 91, 2), rgba(241, 102, 15, 0));
}

.rank.rank-2 {
  background: linear-gradient(rgba(249, 110, 17, 0.8), rgba(239, 184, 148, 0));
}

.rank.rank-3 {
  background: linear-gradient(rgba(251, 141, 67, 0.6), rgba(227, 163, 120, 0));
}

.rank.rank-n {
  background: #dcd5d5;
  color: #333;
}

.article-info {
  flex: 1;
}
.article-title {
  font-size: 12px;
  font-weight: bold;
  color: #333;
  /* 添加其他样式属性 */
}
/deep/ .el-tabs__item,
/deep/ .el-tabs__item:hover,
/deep/ .el-tabs__item.is-active {
  font-size: 20px;
  font-weight: bold;
}

/deep/ .el-tabs__item:hover {
  color: #ff6600;
}

/deep/.el-tabs__item.is-active {
  color: #ff6600;
  border-bottom-color: transparent;
  margin-right: 16px; /* 调整 tabs 导航项之间的间距 */
}
</style>